<template>
  <div>
    <!-- {{ JSON.stringify(data) }} -->

    <a-alert type="success" banner>
      <template #icon>
        <PushpinOutlined />
      </template>
      <template #message><b>绩效域要点</b></template>
      <template #description>
        {{data.point}}
      
      </template>
    </a-alert>

    <a-alert type="success" banner>
      <template #icon>
        <RadarChartOutlined />
      </template>
      <template #message><b>绩效域目标</b></template>
      <template #description>
        <ul>
          <li v-for="item in data.targetList" :key="item">
            {{ item }}
          </li>
        </ul>
      </template>
    </a-alert>
  </div>
</template>
<script setup>
import { RadarChartOutlined,PushpinOutlined } from "@ant-design/icons-vue";

import { ref, onMounted, watch ,toRaw} from "vue";
import PmpItemName from "@/components/PmpItemName.vue";
import RelaList from "@/components/RelaList.vue";
import CONSTANTS from "@/constants/Constants.js";

import pmpHooks from "@/hooks/PmpHooks.js";
const props = defineProps({
  pmpItemId: {
    type: String,
    default: "",
  },
});

const data = ref({});

onMounted(async () => {
  await loadPageData();
  //   data.value = pmpHooks.loadPmpDictDetail(props.id)
  //   title.value = pmpHooks.loadPmpDictDetail(props.id).nameCn
});

watch(
  () => props.pmpItemId,
  async (v) => {
    await loadPageData();
    // data.value = pmpHooks.loadPmpDictDetail(v)
    // title.value = pmpHooks.loadPmpDictDetail(v).nameCn
  }
);

async function loadPageData() {
  const res = await pmpHooks.queryPmpPerformanceDomainDtoByPmpItemId(
    props.pmpItemId
  );
  console.log(res);
  data.value = res.result;
}
</script>
<style scoped></style>
